統合

Chart.js は、プレーンな JavaScript またはさまざまなモジュール ローダーと統合できます。以下の例は、さまざまなシステムに Chart.js をロードする方法を示しています。

スクリプトタグ

<script src="path/to/chartjs/dist/Chart.js"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>

共通JS

var Chart = require('chart.js');
var myChart = new Chart(ctx, {...});

バンドラー (Webpack、Rollup など)

import Chart from 'chart.js';
var myChart = new Chart(ctx, {...});

ノート：Moment.js は Chart.js とともに依存関係としてインストールされます。 Moment.js を使用したくない場合 (別の日付アダプターを使用しているか、単に時刻機能が必要ないため)、この依存関係を除外するようにバンドラーを構成する必要があります (例:externalsウェブパック用またexternalロールアップ用）。

// Webpack
{
    externals: {
        moment: 'moment'
    }
}

// Rollup
{
    external: ['moment']
}

JSが必要

重要：RequireJSできるいいえCommonJSモジュールをそのままロードしますそのため、代わりにいずれかの UMD ビルドを必ず必要にしてください (つまり、dist/Chart.js、dist/Chart.min.js、など）。

require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});

ノート：v2.8 以降、Moment.js はオプションの依存関係です。Chart.jsとChart.min.js。 Moment.js でタイム スケールを使用するには、Moment.js が完全にロードされていることを確認する必要があります。前Chart.js が必要です。シムを使用することもできます。

require.config({
    shim: {
        'chartjs': {
            deps: ['moment']    // enforce moment to be loaded before chartjs
        }
    },
    paths: {
        'chartjs': 'path/to/chartjs/dist/Chart.min.js',
        'moment': 'path/to/moment'
    }
});

require(['chartjs'], function(Chart) {
    new Chart(ctx, {...});
});

または単純に 2 つのネストされたものを使用しますrequire():

require(['moment'], function() {
    require(['chartjs'], function(Chart) {
        new Chart(ctx, {...});
    });
});

コンテンツセキュリティポリシー

デフォルトでは、Chart.js は CSS を DOM に直接挿入します。を使用して保護された Web ページの場合コンテンツ セキュリティ ポリシー (CSP)、これには許可する必要がありますstyle-src 'unsafe-inline'。より厳格な CSP 環境の場合、style-src 'self'が許可されている場合は、次の CSS ファイルを Web ページに手動で追加する必要があります。

<link rel="stylesheet" type="text/css" href="path/to/chartjs/dist/Chart.min.css">

また、スタイルインジェクションをオフにする必要があります最初のグラフを作成する前に:

// Disable automatic style injection
Chart.platform.disableCSSInjection = true;